<!-- 详情模式 -->
<template >
  <el-form-item :key="index"
                :prop="item.prop"
                :label-width="calcDefaultOption(item,'labelWidth', '')"
                :class="['dst-add-form-item', isHasOther ? 'hasOther-el-form-item': '', item.class || '']">
    <!-- 渲染左边label部分 -->
    <template>
      <div v-if="item.renderLabel"
           slot="label">
        <render :render="item.renderLabel"
                :form="ruleForm"
                :item="item" />
      </div>
      <div v-else-if="item.label"
           slot="label">{{ item.label }}</div>
    </template>
    <template v-if="item.type =='render'">
      <render :render="item.render"
              :form="ruleForm"
              :item="item" />
    </template>
    <!-- 需要左边的lable，但右边自定义slot -->
    <template v-else-if="item.type =='slot'">
      <slot :name="item.prop"
            :form="ruleForm" />
    </template>
    <template v-else-if="item.type =='dstUpload'">
      <dstUpload ref="dstUpload"
                 v-model="ruleForm[item.prop]"
                 class="dst-add-input"
                 :mode-type="'detail'"
                 :is-tooltip="item.isTooltip || false"
                 :list-type="calcDefaultOption(item, 'listType', 'text')"
                 :props="calcDefaultOption(item, 'props', {fileName: 'fileName', fileUrl: 'fileUrl',saveUrl: 'saveUrl'})" />
    </template>
    <template v-else-if="item.type =='button'">
      <el-button :plain="calcDefaultOption(item, 'plain', true)"
                 class="hasOther-left-margin"
                 :disabled="item.disabled || false"
                 :type="item.btnType || 'success'"
                 :class="item.btnClass || ''"
                 :size="item.btnSize || 'mini'"
                 :icon="item.iconName || ''"
                 @click="itemClick(item, index)">{{ item.text || '确定' }}</el-button>
    </template>
    <!-- 有配置click事件的默认给文字标绿添加类名：dst-green-underline -->
    <!-- textarea默认添加类名：dst-detail-border-textarea -->
    <!-- dst-detail-border-textarea的样式默认会有一条框有点丑，所以判断只有当确定有值切长度大于150时才加这个class -->
    <!-- ruleForm的值是空数组或者null，undefined时，默认填充空字符 -->
    <div v-else
         class="dst-add-input"
         :class="{'dst-green-underline':item.click, 'dst-detail-border-textarea': item.type =='textarea' && setDetailShowText(item).length > 150}"
         @click="itemClick(item, index)">
      <el-tooltip v-if="item.isTooltip && setDetailShowText(item) !== '-'"
                  effect="dark"
                  :content="setDetailShowText(item)"
                  placement="top-start">
        <div>{{ setDetailShowText(item) }}</div>
      </el-tooltip>
      <template v-else>
        {{ setDetailShowText(item) }}
      </template>
    </div>
    <!-- 一行内有多个元素，可多插入input，select,button或render -->
    <template v-if="item.hasOther && Object.prototype.toString.call(item.hasOther) === '[object Object]' && !item.hasOther.isHidden">
      <DstFormDetail :item="item.hasOther"
                     :rule-form="ruleForm"
                     :index="index"
                     :is-has-other="true"
                     @itemClick="itemClick">
        <slot v-if="item.hasOther.prop"
              :slot="item.hasOther.prop"
              :name="item.hasOther.prop"
              :form="ruleForm" />
      </DstFormDetail>
    </template>
  </el-form-item>
</template>
<script>
import dstUpload from '@/portal-common/components/DstUpload/index'
import render from './render'
export default {
  name: 'DstFormDetail',
  components: { render, dstUpload },
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    ruleForm: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: [Number, String],
      default() {
        return null
      }
    },
    isHasOther: {
      type: Boolean,
      default() {
        return false
      }
    },
  },
  data() {
    return {

    }
  },
  mounted() {
    // console.log(this.item, 222111)
  },
  methods: {
    calcDefaultOption(item, type, defalut = true) {
      return (item[type] !== undefined) ? item[type] : defalut
    },
    // 纯文案时，有些值为空数组或者null，undefined的情况。文本模式的项：统统显示空字符
    setDetailShowText(item) {
      let value = ''
      if (item.props && item.props.detailProp) {
        if (Array.isArray(item.props.detailProp)) {
          item.props.detailProp.forEach((key, index) => {
            let cutStr = ' / '
            if (index == item.props.detailProp.length || index == 0) {
              cutStr = ''
            }
            value = value + cutStr + (this.ruleForm[key] || '-')
          })
        } else {
          value = this.ruleForm[item.props.detailProp]
        }
      } else {
        value = this.ruleForm[item.prop]
      }
      if (Array.isArray(value)) {
        if (value.length === 0) {
          return '-'
        } else {
          return value.join(',')
        }
      } else if (!value && parseInt(value) !== 0) {
        return '-'
      } else {
        return value
      }
    },
    itemClick(item, index) {
      // 若有自定义事件，此时调用
      this.$emit('itemClick', item, index)
    },
  }
}
</script>
